<template>
	<view class="container">
		<view class="cu-nav-bar">
			<uni-nav-bar statusBar color="#ffffff" backgroundColor="#07c160" left-icon="left" right-icon="list"
				@clickLeft="goBack" @clickRight="clickRight" title="交易记录" />
		</view>
		<!-- 查询区 -->
		<view class="pay-list-select"></view>
		<!-- 列表 -->
		<scroll-view class="pay-list-scroll" :scroll-y="true" @scrolltolower="scrolltolower">
			<view v-for="item, index in pay_log_list" :key="index">
				<!-- 日期提示 -->
				<text class="dataText"
					v-if="index==0 || (item.payTime.slice(0,10) != pay_log_list[index-1].payTime.slice(0,10))">
					<uni-dateformat :date="item.payTime" format="M月d日"></uni-dateformat>
				</text>
				<!-- 交易数据 -->
				<view class="pay-list-item" @click="goUpdateCashLog(item)">
					<view class="pay-list-item-left">
						<image class="item-info-icon" mode="aspectFit" :src="item.icon"></image>
					</view>
					<view class="pay-list-item-right">
						<view class="pay-list-item-content">
							<view class="type">{{ item.cashType }}</view>
							<view
								:class="['money', item.payType == 3 ? '' : gteq(item.money, '0') ? 'money-green':'money-red']">
								{{gteq(item.money, '0') ? ('￥' + formatMoney(item.money)) : ('-￥' + formatMoney(item.money.replace('-','')))}}
							</view>
						</view>
						<view class="pay-list-item-time">
							<view class="time">
								<uni-dateformat :date="item.payTime" format="hh:mm"></uni-dateformat>
								<view class="time-note" v-if="item.note && item.note.trim() != ''">
									{{ "- " + item.note }}
								</view>
							</view>
							<view class="account">
								<text class="account_item">{{ item.account }}</text>
								<uni-icons v-if="item.payType == 3" type="arrow-right" size="8"
									color="#999999"></uni-icons>
								<text class="account_item" v-if="item.payType == 3">{{ item.account2 }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="moreStatus" :contentText="contentText"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		onUnmounted,
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getCashLogListForDate,
	} from '@/service/service-api.js'
	import {
		formatMoney
	} from '@/utils/utils.js'
	import {
		gteq
	} from '@/utils/math-utils'
	const pay_log_list = ref([]) // 交易记录列表
	const queryParam = ref({
		date: '',
		payType: 0,
		cashType: '',
		pageNum: 0,
		pageSize: 20
	}) // 列表页数

	const moreStatus = ref('more') // 加载更多 more/loading/noMore
	const contentText = ref({
		contentdown: "上拉加载更多",
		contentrefresh: "正在加载...",
		contentnomore: "已经到底了"
	}) // 加载更多 more/loading/noMore

	onLoad((e) => {
		// 获取参数日期，但不执行获取数据，onShow里获取。下一页返回来时，会触发onShow，不会触发onLoad
		if (e.date) {
			queryParam.value.date = e.date
		}
		if (e.payType) {
			queryParam.value.payType = e.payType
		}
		if (e.cashType) {
			queryParam.value.cashType = e.cashType
		}
	})

	onShow(() => {
		moreStatus.value = 'more'
		queryParam.value.pageNum = 0
		pay_log_list.value = []
		getLogList()
	})

	// 在组件卸载时
	onUnmounted(() => {});

	// 加载列表数据
	const getLogList = () => {
		if (moreStatus.value == 'more') {
			moreStatus.value = 'loading'
			const dayPay = getCashLogListForDate(queryParam.value.date, queryParam.value.payType,
				queryParam.value.cashType, queryParam.value.pageNum, queryParam.value.pageSize)
			if (dayPay.list.length == 0) {
				moreStatus.value = 'noMore'
				contentText.value.contentnomore = pay_log_list.value.length > 0 ? '已经到底了' : '没有数据'
			} else if (dayPay.list.length < queryParam.value.pageSize) {
				pay_log_list.value.push(...dayPay.list)
				moreStatus.value = 'noMore'
				contentText.value.contentnomore = '已经到底了'
			} else {
				pay_log_list.value.push(...dayPay.list)
				moreStatus.value = 'more'
			}
		}
	}

	// 准备编辑交易记录页面
	const goUpdateCashLog = (row) => {
		let inputMoney = '0'
		// 输入时不带正负
		if (row.money.startsWith('-')) {
			inputMoney = row.money.slice(1)
		} else {
			inputMoney = row.money
		}
		let logInfo = {
			'id': row.id,
			// 页面金额统一显示为正数，保存接口自动判断正负。
			'money': inputMoney, // 金额 (输入时不带正负，保存时添加正负)
			'account': row.account, // 账户名称 (使用账户名称,名称唯一)
			'payType': row.payType, // 1 收入、 2 支出、 3 转账
			'cashType': row.cashType, // 收支分类 (使用分类名称,名称唯一)
			'payTime': row.payTime, // 收支时间
			'note': row.note, // 备注
			'account2': row.account2, // 转账收款账户名称 (使用账户名称,名称唯一)
		}
		goEditCashLogInfo(logInfo)
	}

	// 前往编辑交易信息页面
	const goEditCashLogInfo = (logInfo) => {
		uni.navigateTo({
			url: "/pages/cash_log_info/cash_log_info?logInfo=" + JSON.stringify(logInfo)
		})
	}

	//下一页
	const scrolltolower = () => {
		queryParam.value.pageNum = queryParam.value.pageNum + 1
		getLogList()
	}

	// 返回
	const goBack = () => {
		uni.navigateBack()
	}

	const clickRight = () => {
		uni.showToast({
			icon: 'none',
			title: '正在开发中'
		})
	}
</script>

<style lang="scss">
	@import url("cash-log-day.css");
</style>